import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Button,
  Space,
  Select,
  Tooltip,
  AutoComplete,
  Divider,
  message,
} from 'antd';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import { history } from 'umi';
import {
  apiFileGetList,
  deviceOnlineState,
  deviceUpgradeSingle,
} from '@/services/otherServices';
import { btnPermission } from '@/utils/utils';
import { adminCompanyType } from '@/utils/constant';

const Search = (props: any) => {
  const { callbackValue, noId, loading: pageLoading } = props;
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const onReset = () => {
    form.resetFields();
    callbackValue({});
  };
  const onFinish = (values: any) => {
    callbackValue(values);
  };

  const { loading, run } = useRequest(apiFileGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  const { loading: deviceUpgradeLoading, run: deviceUpgrade } = useRequest(
    deviceUpgradeSingle,
    {
      manual: true,
      throttleInterval: 500,
      onSuccess: (res, params) => {
        if (!res.success) {
          message.error(res.message);
          return;
        } else {
          message.success(res.message);
        }
      },
    },
  );

  useUpdateEffect(() => {
    run({
      displayName: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    run({
      pageNo: 1,
      pageSize: 10,
    });
  }, []);

  return (
    <Form
      style={{ display: 'flex', flexWrap: 'wrap' }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >
      {btnPermission(history.location.pathname, 'btn_dev_search') && (
        <>
          <Form.Item name="company" style={{ marginBottom: 10, width: 200 }}>
            <Input placeholder={'请选择公司名称'} />
          </Form.Item>
          <span style={{ padding: 4 }} />
          <Form.Item name="deviceNo" style={{ margin: 0, width: 200 }}>
            <Input placeholder={'请输入设备编号'} />
          </Form.Item>
          <span style={{ padding: 4 }} />
          <Form.Item name="productLine" style={{ margin: 0, width: 200 }}>
            <Input placeholder={'请输入产线名'} />
          </Form.Item>
          <span style={{ padding: 4 }} />
          <Form.Item style={{ margin: 0, width: 80 }}>
            <>
              <Tooltip title="搜索">
                <Button
                  disabled={pageLoading}
                  type="primary"
                  htmlType="submit"
                  icon={<SearchOutlined />}
                />
              </Tooltip>
              <span style={{ padding: 4 }} />
              <Tooltip title="重置">
                <Button
                  htmlType="button"
                  onClick={onReset}
                  icon={<ReloadOutlined />}
                />
              </Tooltip>
            </>
          </Form.Item>
        </>
      )}
      {btnPermission(history.location.pathname, 'btn_dev_upgrade') && (
        <span style={{ display: 'flex' }}>
          <Form.Item name="filename" style={{ margin: 0, width: 250 }}>
            <Select
              style={{ width: 240 }}
              showSearch
              onSearch={value => {
                setSearchValue(value);
              }}
              filterOption={false}
              placeholder="选择升级文件"
            >
              {data &&
                data.map((item: any) => (
                  <Select.Option key={item.uri} value={item.uri}>
                    {item.displayName}
                  </Select.Option>
                ))}
            </Select>
          </Form.Item>
          <span style={{ padding: 4 }} />
          <Form.Item style={{ margin: 0 }}>
            <>
              <Button
                loading={deviceUpgradeLoading}
                disabled={!noId}
                type="primary"
                onClick={() => {
                  if (
                    !form.getFieldValue('filename') ||
                    form.getFieldValue('filename') === ''
                  ) {
                    message.error('请选择升级文件');
                    return;
                  }
                  deviceUpgrade({
                    deviceNo: noId,
                    uri: form.getFieldValue('filename'),
                  });
                }}
              >
                升级
              </Button>
            </>
          </Form.Item>
        </span>
      )}
    </Form>
  );
};

export default Search;
